<!DOCTYPE html>
<html>
    <head>
        <title>个人简历</title>
        <link rel="stylesheet" href="./css样式.css">
        <link rel="stylesheet" href="loading.css">
        <script src="//at.alicdn.com/t/font_1256881_2ylkvcpbym8.js"> </script>
        <style type="text/css">
            .icon {
               width: 1em; height: 1em;
               vertical-align: -0.15em;
               fill: currentColor;
               overflow: hidden;
            }
            .first-welcome{
                display: none;
                position: fixed;
                top:0;left: 0;width: 100%;height: 100%;
                background: #888;
                z-index: 1;
                justify-content:center;
                align-items: center;

            }
            .first-welcome.active{
                display: flex;
            }
        </style>
    </head>
    <body>
        <div id="FirstWelcome" class="first-welcome active">  <div class="loading"></div></div>
        <div id="topNavBar" class="topNavBar ">
            
            <div class="topNavBar-inner clearfix">
                <a class="logo" href="#" alt="logo" style="float: left;">
                    <span class="rs">RS</span><span class="card">card</span>
                </a>
                    <nav class="menu" style="float:right;">
                        <ul class="clearfix">
                            <li><a href="#siteAbout">关于 </a></li>
                            <li><a href="#siteSkills"> 技能</a></li>
                            <li class="menuTigger"><a  href="">博客</a>
                              <ul class="submenu">
                                  <li>博客1</li>
                                  <li>博客2</li>
                                  <li>博客3</li>
                             </ul>
                            </li>
                            <li class="menuTigger"><a  href="#siteWorks">作品</a> 
                            <ul class="submenu">
                                <li>作品1</li>
                                <li>作品2</li>
                                <li>作品3</li>
                            </ul>
                            </li>
                            <li><a href="#">日历</a> </li>
                            <li><a href="#">联系方式</a> </li>
                            <li><a href="#">其他</a> </li>
                        </ul>
                    </nav>
                </div>
            </div>
            
        </div>
             <div class="banner">
                <div class="mask">   </div>
            </div>
        <main style="margin-top:-300px;">
            <div data-x id="siteAbout" class="usercard">
                            <div class="pictureandtext clearfix" >
                                <div class="picture">
                                    <img src="./img/photo.jpg" width="299px" height="347px" alt="头像" >
                                </div>
                               <div class="text">
                                  <span class="welcome">hello
                                  <span class="triangle"></span>
                                 </span>
                                
                               
                                 <h1>name</h1>
                                 <p>前端工程师</p>
                                 <hr>
                                 <dl>
                                    <dt>年龄</dt> <dd>21</dd>
                                    <dt>城市</dt> <dd>……</dd>
                                    <dt>邮箱</dt> <dd>……</dd>
                                    <dt>手机</dt> <dd>……</dd>
                                 </dl>
                                </div>
                         </div>
                            <footer class="media">
                                    <a href="#">      
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-jianshu"></use>
                                        </svg>
                                    </a>
                                    <a href="#">                                       
                                         <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-github"></use>
                                        </svg>
                                    </a>
                                    <a href="#">                                     
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-weibo"></use>
                                        </svg>
                                    </a>
                                    <a href="#">                                       
                                         <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-twitter"></use>
                                        </svg>
                                    </a>
                                
                            </footer>
                        </div>
                        <p class="downloadResume-wapper">
                                <a class="downloadResume" href="./produce.pdf" target="_blank" download>下载 PDF 简历</a>

                        </p>
                   
                    <p class="selfIntroduction">
                        自我介绍
                    </p>
        </main>
                <section data-x id="siteSkills" class="skill">
                    <h2>技能</h2>
                    <ol class="clearfix">
                    <li>
                        <h3>HTML 5 &amp; CSS 3</h3>
                           <div class="progressBar">
                               <div class="progress"></div>
                           </div>
                    </li>

                    <li>
                        <h3>JavaScript</h3>
                           <div class="progressBar">
                           <div class="progress"></div>
                           </div>
                    </li>
                    <li>
                         <h3>JQuery</h3>
                        <div class="progressBar">
                         <div class="progress"></div>
                        </div>
                    </li>
                    <li>
                       <h3>Vue.js</Vue></h3>
                       <div class="progressBar">
                        <div class="progress"></div>
                          </div>
                    </li>
                    <li>
                         <h3>React.js</h3>
                           <div class="progressBar">
                           <div class="progress"></div>
                          </div>
                     </li>
                      <li>
                        <h3>Node.js</h3>
                          <div class="progressBar">
                          <div class="progress"></div>
                           </div>
                     </li>
                    </ol>
                  </section>
                  <section data-x class="portfolio" id="siteWorks">
                        <h2>作品集</h2>
                    <nav>
                      <ol class="clearfix">
                        <li id="portfolioALL">所有</li>
                        <li id="portfolioFramework">框架</li>
                        <li id="portfolioVallina">原生JS&amp;CSS</li>
                      </ol>
                      <div id="portfolioBar" class="bar state-1">
                          <div class="bar-inner"></div>
                      </div>
                    </nav>
                    <script>
                    portfolioALL.onclick=function(){
                        portfolioBar.className='bar state-1'
                    }
                    portfolioFramework.onclick=function(){
                        portfolioBar.className='bar state-2'
                    }
                    portfolioVallina.onclick=function(){
                        portfolioBar.className='bar state-3'
                    }

                    </script>
                    
                    <div class="works" style="height: 597px;">
                      <div class="big" style="top:0; left:0;">
                          <img src="./img/1.jpg" alt="作品1">
                      </div>
                      <div class="small" style="top:0px; left:645px;">
                         <img src="./img/2.jpg" alt="作品2">
                      </div>
                      <div class="small" style="top:312px; left:645px;">
                            <img src="./img/3.jpg" alt="作品3">
                      </div>
                    </div>
                </section>
        </div>
    <script>
        setTimeout(function(){
            FirstWelcome.classList.remove('active')
        },3000)
        window.onscroll=function(){
            if(window.scrollY>0)
            {
                topNavBar.classList.add('sticky')
            }else
            {
                topNavBar.classList.remove('sticky')
            }
        }
        let specialTags=document.querySelectorAll('[data-x]')
        for(let i=0;i<specialTags.length;i++)
        {
            specialTags[i].classList.add('offset')
        }
    window.onscroll=function(x){ 
        let specialTags=document.querySelectorAll('[data-x]')
        let minIndex=0
        for(let i=1;i<specialTags.length;i++)
        {
            if(Math.abs(specialTags[i].offsetTop-window.scrollY) < Math.abs(specialTags[minIndex].offsetTop-window.scrollY))
            { 
                minIndex=i
            }
        }
        ///minIndex就是距窗口顶端最近的元素
        specialTags[minIndex].classList.remove('offset')
        for(let i=0;i<specialTags.length;i++)
        {
            specialTags[i].classList.remove('active')
        }
        specialTags[minIndex].classList.add('active')
        let id=specialTags[minIndex].id
        let a=document.querySelector('a[href="#'+id+'"]')
        let li=a.parentNode
        let brothersAndMe=li.parentNode.children
        for(let i=0;i<brothersAndMe.length;i++)
        {
            brothersAndMe[i].classList.remove('highlight')
        }
        li.classList.add('highlight')
}
        let liTags=document.querySelectorAll('nav.menu>ul>li')
            for(let i=0;i<liTags.length;i++){
                liTags[i].onmouseenter=function(x){
                    x.currentTarget.classList.add('active')
                }
                liTags[i].onmouseleave=function(x){
                    x.currentTarget.classList.remove('active')
                }
            }
       let aTags =document.querySelectorAll('nav.menu>ul>li>a')
       for (let i=0;i<aTags.length;i++)
       {
           aTags[i].onclick=function(x){
               x.preventDefault()///阻止默认行为
               let a=x.currentTarget///获取用户点击的tag标签
               let href=a.getAttribute('href')//获取到a标签上写的href
               let element=document.querySelector(href)///根据href得到指定元素 eg：根据siteAbout得到关于元素块的位置
               let top=element.offsetTop  ///top获得元素到页面顶端的距离
               window.scrollTo(0,top-80) ///移动到x方向移动0像素，y方向距离顶端80px的位置
               let n=20 
               let t=500/n
               let currentTop=window.scrollY
               let target=top-80
               let S=Math.abs(target-currentTop)
               let s=S/n
               let i=0
               let id=setInterval(()=>{
                   if(i===n){
                       window.clearInterval(id)
                       return
                   }
                   i=i+1
                   window.scrollTo(0,currentTop + s * i)
               },t)
      }
    }

    </script>
    </body>
</html>